<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>雪碧图</title>
    <style>
        .icon1{
            display: block;  /*把一个行内元素变为一个块级元素*/
            width: 71px;
            height: 80px;
            background-image: url('./image/18雪碧图.png');
            background-position: -74px -46px;
        }
        .icon2{
            display: block;  /*把一个行内元素变为一个块级元素*/
            width: 71px;
            height: 80px;
            background-image: url('./image/18雪碧图.png');
            background-position: -74px -46px;  /*使用 background-position 属性来设置图片的移动方向，从而显示需要显示的那部分。*/
        }
    </style>
</head>
<body>
    <div>
        <p>CSS Sprite 也叫 CSS精灵图、CSS雪碧图，是一种图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去。<br>一般用于表情包的处理。</p>
        <p>优点：<br>1、减少图片的子节；<br>2、减少网页的 http请求，从而大大提高页面的性能。</p>
        <p>原理：<br>1、通过 background-inmage 引入背景图</p>
        <p>2、通过 background-position 把背景图片移动到自己需要的位置。</p>
    </div>
    <div>
        <span class="icon1"></span>
        <span class="icon2"></span>
    </div>
</body>
</html>